<div class="row">
	<div class="col-xs-12">
		<div class="box">
			<div class="box-header">
				<h3 class="box-title">日志管理</h3>
				<div class="box-tools">
					<div class="input-group input-group-sm" style="width: 350px;">
						<input type="text" name="table_search" id="searchNameId"
							class="form-control pull-right" placeholder="用户名">

						<div class="input-group-btn">
							<button type="button" class="btn btn-default btn-search">
                                <i class="fa fa-search"></i>
							</button>
							<button type="button" class="btn btn-default btn-delete">删除</button>
						</div>
					</div>
				</div>
			</div>
			<!-- /.box-header -->
			<div class="box-body table-responsive no-padding">
				<table class="table table-hover">
					<thead>
						<tr>
						    <th><input type="checkbox" id="checkAll">全选</th>
							<th>用户名</th>
							<th>操作</th>
							<th>请求方法</th>
							<th>请求参数</th>
							<th>IP</th>
							<th>执行时长</th>
						</tr>
					</thead>
					<tbody id="tbodyId">
					    <tr>
					       <td colspan="7">数据正在加载中...</td>
					    </tr>
					</tbody>
				</table>
			</div>
			<div id="pageId" class="box-footer clearfix">
			
			</div>
			<!-- /.box-body -->
		</div>
		<!-- /.box -->
	</div>
</div>
<script type="text/javascript">
//JS端解决问题的方法:debugger,console.log,排除法
   $(function(){
	   //const 关键字用于定义常量,常量不允许多次赋值
	   const pageUrl="doPageUI";
	   //在pageId对应的位置异步加载pageUrl对应的资源
	   //资源加载完成执行doGetObjects函数,
	   //向服务端发异步请求加载数据
	   $("#pageId").load(pageUrl,doGetObjects);
	   //查询按钮事件注册
	   $(".input-group-btn")
	   .on("click",".btn-search",doQueryObjects)
	   //删除按钮事件注册
	   .on("click",".btn-delete",doDeleteObjects)
	   //全选checkbox对象的事件注册
	   $("#checkAll")
	   .change(doChangeTBodyCheckBoxState);
	   //在tbody对象上注册change事件,当tbody中
	   //.cBox对应的对象状态变化时执行事件处理
	   $("#tbodyId")
	   .on("change",".cBox",doChangeTHeadCheckBoxState);
   })
   //修改thead对象中checkbox对象的状态
   function doChangeTHeadCheckBoxState(){
	   debugger
	   //1.定义变量flag,并给定初始化值为true
	   var flag=true;
	   //2.获得所有tbody中checkbox对象状态,并
	   //进行逻辑与操作
	   $("#tbodyId input[type=checkbox]")
	   .each(function(){
		   flag=flag&&$(this).prop("checked")
	   })
	   //3.修改thead中全选checkbox对象的状态
	   $("#checkAll").prop("checked",flag);
   }
   //设置tbody中checkbox对象的状态
   function doChangeTBodyCheckBoxState(){
	   //1.获取thead中checkAll对象的状态.
	   var flag=$(this).prop("checked");
	   //2.修改tbody中checkbox对象状态
	   $("#tbodyId input[type=checkbox]")
	   .prop("checked",flag);
   }
   
   //获取选中记录的id并存储到数组
   function doGetCheckedIds(){
	//1.定义数组 
	 var idArray=[];
	//2.获取tbody中选中checkbox对象的值
	 $("#tbodyId input[type=checkbox]")
	 .each(function(){//发现checkbox则回调此函数
		if($(this).prop("checked")){
			idArray.push($(this).val())
		}
	 })
	 //3.返回数组
	 return idArray;
   }
   
   //处理删除按钮事件
   function doDeleteObjects(){
	  //debugger
	  //1.获取用户选中的记录id,并进行校验.
	  var idArray=doGetCheckedIds();
	  if(idArray.length==0){
		  alert("请先选择");
		  return;
	  }
	  //2.给出提示"确认删除吗?"
	  if(!confirm("确认删除吗?"))return;
      //3.发送异步请求执行删除操作
      //3.1请求的参数
      var params={"ids":idArray.toString()};
      //3.2请求的url
      var url="log/doDeleteObjects";
      //3.3发送异步请求
      $.post(url,params,function(result){
    	  if(result.state==1){
    		  alert(result.message);
    		  //doGetObjects();
    		  doRefreshPageAfterDeleteOK();
    	  }else{
    		  alert(result.message);
    	  }
      })
   }
  
   //删除操作结束以后,刷新页面
   function doRefreshPageAfterDeleteOK(){
	   //1.获取当前页码值,总页数
	   var pageCurrent=
	   $("#pageId").data("pageCurrent");
	   var pageCount=
	   $("#pageId").data("pageCount");
	   //2.获取checkAll对象状态
	   var flag=$("#checkAll").prop("checked");
	   //3.基于指定条件修改当前页码值
	   if(pageCurrent==pageCount&&pageCurrent>1
			   &&flag){
		   pageCurrent--;
		   $("#pageId")
		   .data("pageCurrent",pageCurrent);
	   }
	   //4.基于新的页码值进行查询
	   doGetObjects();
   }
   //处理查询按钮事件
   function doQueryObjects(){
	  //1.初始化当前页码值为1
	  $("#pageId").data("pageCurrent",1);
	  //2.基于请求参数(用户名)执行异步查询.
	  doGetObjects();
   }
   //向服务端发起异步请求获取日志记录信息
   function doGetObjects(){
	   //初始化thead中checkbox对象的状态
	   $("#checkAll").prop("checked",false);
	  // debugger
	   //1.请求参数
	   //1.1获取当前页码值
	   var pageCurrent=$("#pageId").data("pageCurrent");
	   if(!pageCurrent)pageCurrent=1;
	   var params={"pageCurrent":pageCurrent};//"pageCurrent=1"
	   //1.2获取查询参数"用户输入的名字"
	   var uname=$("#searchNameId").val();
	   if(uname)params.username=uname;
	   //2.请求的url
	   var url="log/doFindPageObjects";
	   //3.发送异步请求并处理请求结果
	   //getJSON为jquery中的一个ajax函数
	   //getJSON基于ajax的xhr对象向服务端发异步请求
	   //getJSON函数将服务端的响应结果转化为JSON格式JS对象
	   //getJSON函数最后会将响应结果传递给callback函数
	   //$.getJSON(url,params,function(result){
		 //  doHandleResponseResult(result);
	   //})
	   //如上调用的简化形式
	   $.getJSON(url,params,doHandleResponseResult);
   }
   //处理响应结果
   function doHandleResponseResult(result){
	   // debugger
	   console.log("result",result);//jsonResult
	   if(result.state==1){//ok
	     //1.初始化页面上的日志记录
	     doSetTableBodyRows(result.data.records);//records
	     //2.初始化分页页面上的分页信息
	     doSetPagination(result.data);//pageObject
	   }else{//error
		 doSetErrorMsg(result.message)
	   }
   }
   //设置错误信息
   function doSetErrorMsg(msg){
	   //初始化tbody内容
	   var tBody=$("#tbodyId");
	   tBody.empty();
	   var tr=$("<tr></tr>");
	   var td=$("<td></td>");
	   td.prop("colspan",7);//一行跨7列
	   td.html(msg);
	   tr.append(td);
	   tBody.append(tr);
	   //初始化page位置内容
	   doInitPagination();
   }
   
   function doSetTableBodyRows(records){
	   //1.获取tbody对象并清空内容
	   var tBody=$("#tbodyId");
	   tBody.empty();//清空内容
	   //2.迭代records记录并将其追加到tbody中
	   for(var i=0;i<records.length;i++){
		   //2.1创建tr对象
		   var tr=$("<tr></tr>");
		   //2.2创建多个td对象
		   var tds=doCreateTds(records[i]);
		   //2.3将td追加到tr中
		   tr.append(tds);
		   //2.4将tr追加到tBody中
		   tBody.append(tr);
	   }
   }
   //创建当前行的多个td对象
   function doCreateTds(row){
	   console.log("rows",row)
	   var tds="<td><input type='checkbox' class='cBox' value='"+row.id+"'></td>"+
		   "<td>"+row.username+"</td>"+
		   "<td>"+row.operation+"</td>"+
		   "<td>"+row.method+"</td>"+
		   "<td>"+row.params+"</td>"+
		   "<td>"+row.ip+"</td>"+
		   "<td>"+row.time+"</td>";
	   return tds;
   }
</script>






